<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js">/*
 * Copyright (c) 2016 VUI(https://git.oschina.net/durcframework/vui) All rights reserved.
 */
;(function(){

<span id='global-property-'>/**
</span> * @ignore
 * @private
 */
VUI.Class('GridView',{
	init:function(grid) {
		this._super(grid);
		this.grid = grid;
		var id = grid.id;
		this.idField = this.opt('idField') || ('idField_' + id);
		this.checkTdWidth = 30;
		this.checkboxTrigger = 'checkboxChange';
		this.radioTrigger = 'radioChange';
		
		this.selectCache = grid.getSelectCache();
		
		this.v_vuitableth = this.buildDirectiveName('vuitableth');
		this.v_vuitabletr = this.buildDirectiveName('vuitabletr');
		this.v_vuitabletd = this.buildDirectiveName('vuitabletd');
		
	}
	,reset:function() {
		if(this.$checkAll) {
			this.$checkAll.prop('checked',false);
		}
	}
	,initDirective:function() {
		this.initHeadDirective();
		this.initTrDirective();
		this.initCellDirective();
	}
	,initHeadDirective:function() {
		var that = this;
		var grid = this.grid;
		
		this.directive(this.v_vuitableth,function(value,$th){
			var header = value.header;
			var halign = header.halign || header.align;
			halign = halign || 'left';
			if(halign) {
				$th.css('text-align',halign);
			}
			if(header.hidden === true) {
				$th.hide();
			}
			
			if(header.width) {
				$th.width(parseInt(header.width));
			}
			
			if(header.checkbox) {
				if(that.isMultiSelect()) {
					var $checkAll = $('&lt;input type=&quot;'+that.getCheckType()+'&quot;&gt;');
					$checkAll.bind('doClick',function(e,checked){
						var $checkboxs = checked ? that.getUnCheckCheckbox() : that.getCheckedCheckbox();
						var fireEventName = checked ? 'CheckAll' : 'UncheckAll';
						$checkboxs.each(function(){
							this.checked = checked;
							$(this).trigger(that.checkboxTrigger);
						});
						
						that.grid.fire(fireEventName,{rows:that.grid.getRows(),$target:$checkAll});
					})
					
					$checkAll.click(function(){
						$(this).trigger('doClick',[this.checked]);
					});
					
					that.$checkAll = $checkAll;
					
					$th.html($checkAll).css('text-align','center');
				}
				
				$th.width(that.checkTdWidth);
			}
			// 排序
			if(header.sortable) {
				var currentSortOrder = that.sortOrder;
				var sortName = header.field;
				$th.css({cursor:'pointer'}).click(function(){
					var $span = $(this).find('span');
					if(currentSortOrder == 'ASC') {
						$span.html('▼');
						currentSortOrder = &quot;DESC&quot;;
					}else{
						$span.html('▲');
						currentSortOrder = &quot;ASC&quot;;
					}		
					that.grid.sort(sortName,currentSortOrder);
				});
			}
		});
	}
	,initTrDirective:function() {
		var that = this;
		var $before = null;
		this.directive(this.v_vuitabletr,function(value,$tr){
			var header = value.header;
			var row = value.row;
			if(that.opt('clickHighlight')) {
				$tr.on('click',function(e) {
					e.stopPropagation();
					// 点击行高亮
					if($before) {
						$before.removeClass('ui-state-highlight');
					}
					
					if(!$tr.hasClass('ui-state-active')) {
						$tr.addClass('ui-state-highlight');
					}
					$before = $tr;
				});
			}
			
			var $checkbox = $tr.find('.vui-gird-check').eq(0);
			if($checkbox.length &gt; 0) {
				if(that.isSelectCache()) {
					var value = $checkbox.val();
					var isInCache = that.grid.isInCache(value);
					$checkbox.prop('checked',isInCache);
					$checkbox.trigger('active');
				}
				// 如果为true，当用户点击行的时候该复选框就会被选中或取消选中。
				// 如果为false，当用户仅在点击该复选框的时候才会呗选中或取消。
				if(that.opt('checkOnSelect')) {
					$tr.on('click',function(e) {
						e.stopPropagation();
						var checked = !$checkbox.prop('checked');
						$checkbox.prop('checked',checked);
						$checkbox.trigger(that.getTriggerName());
					});
					
				}
			}
			
		});
	}
	,isOddTr:function(index) {
		var isOdd = (index + 1)%2 == 0;
		// 显示斑马线
		return this.opt('striped') &amp;&amp; isOdd;
	}
	,initCellDirective:function() {
		var that = this;
		// 自定义指令,作用在class上
		this.directive(this.v_vuitabletd,function(value,$td){
			
			var header = value.header;
			var row = value.row; 
    		var val = row[header.field];
    		var index = value.index;

			var align = header.align || 'left';
			if(align) {
				$td.attr('align',align);
			}
			if(header.hidden === true) {
				$td.hide();
			}
			if(header.styler) {
	    		$td.attr('style',header.styler(val,row,index));
	    	}
			// 文本在同一行
			if(that.opt('nowrap')) {
				$td.css({'whiteSpace':'nowrap'});
			}else{
				$td.css({'whiteSpace':'normal','wordWrap':'break-word'});
			}
			
			if(header.checkbox) {
				that.buildSelections($td,index,row,header);
				return;
			}
			
	    	if(header.formatter) {
	    		val = header.formatter(val,row,index,$td);
	    	}
	    	
	    	$td.html(val);
		});
	}
	// 构建选择框
	,buildSelections:function($td,index,row,header) {
		var that = this;
		var clickHandler = that.isSingleSelect()
			? this.radioClickHandler 
			: this.checkboxClickHandler;
		
		var pkId = header.field || this.idField;
		this.opt('idField',pkId);
		var value = row[pkId] || ('value_' + index + &quot;_&quot; + that.grid.page.pageIndex);
		
		$td.addClass('pui-datatable-tdcheck')
		var initChecked = row.selected ? ' checked=&quot;checked&quot; ' : '';
		// 创建
		var $checkbox = $('&lt;input type=&quot;'+that.getCheckType()+'&quot; ' +
				'class=&quot;vui-gird-check&quot; ' +
				'data-index=&quot;'+index+'&quot; ' +
				'name=&quot;' + that.idField + '&quot; ' +
				'value=&quot;'+value+'&quot; ' +
				''+initChecked+'&gt;')
			.click(function(e){
				e.stopPropagation();
				
				clickHandler.call(that,$(this),index,row);
		});
		
		var param = {index:index,row:row,$target:$checkbox};
		
		// 添加自定义事件
		$checkbox.bind(that.checkboxTrigger,function(){
			var checked = this.checked;
			var eventName = checked ? 'Check' : 'Uncheck';
			var $cbx = $(this);
			
			that.setCheckboxCache($cbx,row);
			
			$cbx.trigger('active');
			
			that.grid.fire(eventName,param);
		});
		
		$checkbox.bind('active',function(){
			if(that.isSingleSelect()) {
				that.setRadioActive($(this));
			}else{
				that.setCheckboxActive($(this));
			}
		});
		
		$checkbox.bind(that.radioTrigger,function(){
			var checked = this.checked;
			var eventName = checked ? 'Select' : 'UnSelect';
			var $radio = $(this);
			var $tr = $radio.parents('tr');
			
			that.setRadioCache($radio,row);
			that.setRadioActive($radio);
			
			that.grid.fire(eventName,param);
			
		});
		
		$td.html($checkbox).css('text-align','center');
	}
	,setCheckboxActive:function($selector) {
		var checked = $selector.prop('checked');
		var $tr = $selector.parents('tr').eq(0);
		if(checked) {
			$tr.removeClass('ui-state-highlight').addClass('ui-state-active');
		}else{
			$tr.removeClass('ui-state-active');
		}
		
		if(this.isMultiSelect()) {
			this.doCheckedAllEffect($selector);
		}
	}
	,setRadioActive:function($radio) {
		var checked = $radio.prop('checked');
		var $tr = $radio.parents('tr');
		
		if(checked) {
			if(this.$_before) {
				this.$_before.removeClass('ui-state-active');
			}
			this.$_before = $tr.removeClass('ui-state-highlight').addClass('ui-state-active');
		}else{
			this.$_before = null;
			$tr.removeClass('ui-state-active');
		}
	}
	,setCheckboxCache:function($checkbox,row) {
		if(this.isSelectCache()) {
			this.getSelectCache()[$checkbox.val()] = $checkbox.prop('checked') ? row : false;
		}
	}
	,setRadioCache:function($radio,row) {
		if(this.isSelectCache()) {
			this.grid.resetSelectCache();
			this.getSelectCache()[$radio.val()] = $radio.prop('checked') ? row : false;
		}
	}
	,getSelectCache:function() {
		return this.grid.getSelectCache();
	}
	,isSelectCache:function() {
		return this.grid.isSelectCache();
	}
	// 单选事件
	,radioClickHandler:function($radio,index,row) {
		$radio.trigger(this.radioTrigger);
	}
	// 多选事件
	,checkboxClickHandler:function($checkbox,index,row) {
		$checkbox.trigger(this.checkboxTrigger);
	}
	// 当所有行勾选时,全选也应该勾选
	,doCheckedAllEffect:function($checkbox) {
		if(!$checkbox.prop('checked')) {
			this.$checkAll.prop('checked',false);
			return;
		}
//		var isCheckedAll = this.isCheckedAll();
//		this.$checkAll.prop('checked',isCheckedAll);
	}
	,isCheckedAll:function() {
		var currentCheckLen = this.getCheckedCheckbox().length;
		var rowLen = this.grid.getRows().length;
		return rowLen == currentCheckLen;
	}
	,checkAll:function() {
		var that = this;
		if(this.isMultiSelect()) {
			var checked = true;
			this.$checkAll
				.prop('checked',checked)
				.trigger('doClick',[checked]);
		}
	}
	,uncheckAll:function() {
		var that = this;
		
		if(this.isMultiSelect()) {
			var checked = false;
			this.$checkAll
				.prop('checked',checked)
				.trigger('doClick',[checked]);
		}else { // 单选情况下
			var $checkboxs = this.getCheckedCheckbox();
			
			$checkboxs.each(function(){
				this.checked = false;
				$(this).trigger(that.getTriggerName());
			});
		}
	}
	,selectRow:function(index) {
		if(this.isSingleSelect()) {
			var $radio = this.getAllCheckbox().eq(index);
			var checked = $radio.prop('checked');
			if(!checked) {
				$radio.prop('checked',!checked);
				$radio.trigger(this.radioTrigger);
			}
		}
	}
	,unselectRow:function(index) {
		if(this.isSingleSelect()) {
			var $radio = this.getAllCheckbox().eq(index);
			var checked = $radio.prop('checked');
			
			if(checked) {
				$radio.prop('checked',!checked);
				$radio.trigger(this.getTriggerName());
			}
		}
	}
	,checkRow:function(index) {
		if(this.isMultiSelect()) {
			var $checkbox = this.getAllCheckbox().eq(index);
			var checked = $checkbox.prop('checked');
			if(!checked) {
				$checkbox.prop('checked',true);
				$checkbox.trigger(this.getTriggerName());
			}
		}
	}
	,uncheckRow:function(index) {
		if(this.isMultiSelect()) {
			var $checkbox = this.getAllCheckbox().eq(index);
			var checked = $checkbox.prop('checked');
			if(checked) {
				$checkbox.prop('checked',false);
				$checkbox.trigger(this.getTriggerName())
			}
		}
	}
	,selectRecord:function(idVal,doTrigger) {
		var $checkbox = this.getCheckboxByIdValue(idVal);
		var checked = $checkbox.prop('checked');
		if(!checked) {
			$checkbox.prop('checked',!checked);
			if(doTrigger) {
				$checkbox.trigger(this.getTriggerName());
			}else{
				$checkbox.trigger('active');
			}
		}
	}
	,vCellClick:function(header,row,e,index) {
		var val = row[header.field];
		var param = {
			index:index
			,head:header
			,value:val
			,row:row
			,target:e.target
		};
		this.grid.fire('ClickCell',param);
	}
	,vCellDblClick:function(header,row,e,index) {
		var val = row[header.field];
		var param = {
			index:index
			,head:header
			,value:val
			,row:row
			,target:e.target
		};
		this.grid.fire('DblClickCell',param);
	}
	,vRowClick:function(index,row,e) {
		var param = {
			index:index
			,row:row
			,target:e.target
		};
		this.grid.fire('ClickRow',param);
	}
	,vRowDblClick:function(index,row,e) {
		var param = {
			index:index
			,row:row
			,target:e.target
		};
		this.grid.fire('DblClickRow',param);
	}
	,getTriggerName:function() {
		return this.isSingleSelect() ? this.radioTrigger : this.checkboxTrigger; 
	}
	,isMultiSelect:function() {
		return !this.isSingleSelect();
	}
	,isSingleSelect:function() {
		return this.opt('singleSelect');
	}
	,getCheckType:function() {
		if(!this.checkType) {
			this.checkType = this.isSingleSelect() ? 'radio' : 'checkbox';
		}
		return this.checkType;
	}
	,getCheckedCheckbox:function() {
		return this.$wraper.find('input[name=&quot;' + this.idField + '&quot;]:checked');
	}
	,getAllCheckbox:function() {
		return this.$wraper.find('input[name=&quot;' + this.idField + '&quot;]');
	}
	,getUnCheckCheckbox:function() {
		return this.$wraper.find('input[name=&quot;' + this.idField + '&quot;]:not(:checked)');
	}
	,getCheckboxByIdValue:function(idVal) {
		return this.$wraper.find('input[value=&quot;' + idVal + '&quot;]');
	}
	,getCheckboxByIndex:function(index) {
		return this.$wraper.find('input[data-index=&quot;' + index + '&quot;]');
	}
	// 返回选中的索引
	,getCheckedIndex:function() {
		var $inputs = this.getCheckedCheckbox();
		var indexs = [];
		$inputs.each(function(){
			indexs.push(parseInt($(this).attr('data-index')));
		});
		return indexs;
	}
	,getTemplate:function(){
		var template = 
		'&lt;div class=&quot;pui-datatable ui-widget&quot;&gt;' +
			// 表格主体
			'&lt;div class=&quot;pui-datatable-scrollable-body&quot;&gt;' +
				'&lt;table :style=&quot;{width:grid.getTableWidth()}&quot;&gt;' +
					'&lt;thead&gt;' +
						'&lt;tr&gt;' + 
							'&lt;th v-show=&quot;grid.opts.rownumbers&quot; class=&quot;ui-state-default pui-table-rownum&quot;&gt;&lt;/th&gt;' + 
							'&lt;th v-'+this.v_vuitableth+'=&quot;{header:header}&quot; class=&quot;ui-state-default&quot; v-for=&quot;header in headers&quot;&gt;{{ header.title }} &lt;span class=&quot;sortspan&quot;&gt;&lt;/span&gt; &lt;/th&gt;' + 
						'&lt;/tr&gt;' + 
					'&lt;/thead&gt;' + 
					'&lt;tbody v-if=&quot;grid.hasData()&quot;&gt;' + 
						'&lt;tr v-'+this.v_vuitabletr+'=&quot;{index:index,row:row}&quot; ' +
							' @click=&quot;grid.view.vRowClick(index,row,$event)&quot; ' +
							' @dblclick=&quot;grid.view.vRowDblClick(index,row,$event)&quot; ' +
							' :class=&quot;{\'ui-datatable-odd\':grid.view.isOddTr(index)}&quot;' + 
							' class=&quot;ui-widget-content&quot; ' +
							'v-for=&quot;(index,row) in grid.getRows()&quot;' +
						'&gt;' +
							'&lt;td v-show=&quot;grid.opts.rownumbers&quot; class=&quot;ui-state-default pui-table-rownum&quot;&gt;{{index+1}}&lt;/td&gt;' + 
							'&lt;td ' +
								'@click=&quot;grid.view.vCellClick(header,row,$event,index)&quot; ' + 
								'@dblclick=&quot;grid.view.vCellDblClick(header,row,$event,index)&quot; ' + 
								'v-'+this.v_vuitabletd+'=&quot;{index:index,row:row,header:header}&quot; ' +
								'v-for=&quot;header in headers&quot;&gt;&lt;/td&gt;' + 
						'&lt;/tr&gt;' +
					'&lt;/tbody&gt;' + 
					'&lt;tbody v-else&gt;' +
						'&lt;tr class=&quot;ui-widget-content&quot;&gt;&lt;td colspan=&quot;{{grid.opts.rownumbers ? headers.length + 1 : headers.length}}&quot;&gt;{{{grid.opts.emptyDataMsg}}}&lt;/td&gt;&lt;/tr&gt;' +
					'&lt;/tbody&gt;' + 
					'&lt;tfoot v-if=&quot;grid.opts.pagination &amp;&amp; grid.hasData()&quot;&gt;' +
						'&lt;tr class=&quot;ui-widget-content&quot;&gt;' +
							'&lt;td style=&quot;padding:0;border-width:0;&quot; colspan=&quot;{{grid.opts.rownumbers ? headers.length + 1 : headers.length}}&quot;&gt;' +
								// 表格分页部分
								'&lt;div style=&quot;border-width:0;&quot; class=&quot;pui-paginator ui-widget-header&quot;&gt;' + 
									'&lt;span class=&quot;pui-paginator-last pui-paginator-element&quot;&gt;' + 
										'&lt;select @change=&quot;page.onChange()&quot; v-model=&quot;page.pageSize&quot;&gt;' +
									  		'&lt;option v-for=&quot;val in grid.opts.pageList&quot; :value=&quot;val&quot;&gt;' +
											    '{{ val }}' +
											'&lt;/option&gt;' +
									  	'&lt;/select&gt;' + 
									'&lt;/span&gt;' +
									'&lt;span title=&quot;首页&quot; @click=&quot;page.first()&quot; :class=&quot;page.canFirst() ? \'\' : \'ui-state-disabled\'&quot; class=&quot;vui-hover pui-paginator-first pui-paginator-element ui-state-default ui-corner-all&quot;&gt;' +  
										'&lt;span class=&quot;ui-icon ui-icon-seek-first&quot;&gt;p&lt;/span&gt;' + 
									'&lt;/span&gt;' +
									'&lt;span title=&quot;上一页&quot; @click=&quot;page.pre()&quot; :class=&quot;page.canPre() ? \'\' : \'ui-state-disabled\'&quot; class=&quot;vui-hover pui-paginator-prev pui-paginator-element ui-state-default ui-corner-all&quot;&gt;' +  
										'&lt;span class=&quot;ui-icon ui-icon-seek-prev&quot;&gt;p&lt;/span&gt;' + 
									'&lt;/span&gt;' +
									'&lt;span title=&quot;下一页&quot; @click=&quot;page.next()&quot; :class=&quot;page.canNext() ? \'\' : \'ui-state-disabled\'&quot; class=&quot;vui-hover pui-paginator-next pui-paginator-element ui-state-default ui-corner-all&quot;&gt;' +  
										'&lt;span class=&quot;ui-icon ui-icon-seek-next&quot;&gt;p&lt;/span&gt;' + 
									'&lt;/span&gt;' +
									'&lt;span title=&quot;尾页&quot; @click=&quot;page.last()&quot; :class=&quot;page.canLast() ? \'\' : \'ui-state-disabled\'&quot; class=&quot;vui-hover pui-paginator-last pui-paginator-element ui-state-default ui-corner-all&quot;&gt;' +  
										'&lt;span class=&quot;ui-icon ui-icon-seek-end&quot;&gt;p&lt;/span&gt;' + 
									'&lt;/span&gt;' +
									
									'&lt;span style=&quot;padding:0 10px;&quot;&gt;第{{ page.pageIndex }}/{{ page.pageCount }}页，共{{ page.total }}条数据&lt;/span&gt;' + 
									//'&lt;button&gt;设置&lt;/button&gt;' + 
								'&lt;/div&gt;' +
						
							'&lt;/td&gt;' +
						'&lt;/tr&gt;' +
					'&lt;/tfoot&gt;' +
				'&lt;/table&gt;' +
			'&lt;/div&gt;' +
		'&lt;/div&gt;';
		return template;
	}
},VUI.View);

})();</pre>
</body>
</html>
